<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../imgs/7fa57f35c179bad9cc9f18e2dd9b1d40.ico" />
    <!-- 1. 引入bootstrap.css -->
    <link rel="stylesheet" href="../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <title>一加商城购物车</title>

    <style>
        #logo {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Roman-55, Helvetica Neue, Helvetica, Arial, sans-serif;
            font-feature-settings: "salt";
            font-weight: 800;
            list-style: none;
            cursor: pointer;
            fill: currentColor;
            line-height: 1;
            color: #f50514;
            font-size: 20px;
            box-sizing: border-box;
            vertical-align: middle;
        }

        #logo> :first-child+li {
            display: inline-block;
            padding-top: 15px;
        }

        #dhl li:hover {
            border-bottom: #f50514;
            border-style: solid;
            border-left-width: 0px;
            border-right-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 5px;
        }

        img {
            width: 220px;
            height: 80px;
        }

        caption {
            color: rgb(211, 184, 179);
            text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.486);
            font-size: 40px;
            background-color: rgb(15, 15, 15);
        }

        #c1 {
            width: 300px;
            height: 120px;
            margin-left: 90px;
        }

        #a1 {
            padding: 0px;
        }

        #jiesuan {
            position: absolute;
            right: 100px;
        }
        #zongjia{
            height: 100px;
            position: fixed;
            top: 400px;
            font-size: 20px;
            margin-left: 1360px;
            color: #808080 ;
            
            /* margin-right: 700px; */
        }
        /* #s1{
            position: relative;
            right: 100px;
        } */
    </style>
</head>

<body>
    <!-- 导航begin -->
    <div class="container-fluid">
        <!-- 定义一行 -->
        <div class="row">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <ul class="nav navbar-nav nav-left" id="logo">
                            <li>
                                <img src="../imgs/OnePlus_Logo.png" style="width: 50px;height: 50px;" alt="">
                            </li>
                            <li id="onepluse">ONEPLUS</li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">

                        <ul class="nav navbar-nav navbar-right" id="dhl">
                            <!-- <li id="l1"><a href="login.html">登录</a></li> -->
                            <li id="l2"><a href="index.html">首页</a></li>
                            <li id="l3" class="active"><a href="shopping cart.html">我的购物车</a></li>
                            <li><a href="story.html" id="Myorder">一加故事</a></li>
                            <li><a href="login.html">安全退出</a></li>
                            <li><a id="a1" href="personal.html"><img src="../imgs/OIP-D.jpg"
                                        style="width: 50px;height: 50px;border-radius: 50%;" alt=""></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航end -->

    <div class="container-fluid">
        <div class="row">
            <div class="table-responsive">
                <table class="table">
                    <!-- <caption><img src="../imgs/OnePlus_Logo.png" style="width: 100px;height: 100px;" alt=""><b>我的一加购物车</b><img src="../imgs/b1.jpg" id="c1" alt=""></caption> -->
                    <thead>
                        <tr>
                            <th><input type='checkbox' id="ck_all" onclick="select_all(this)"></th>
                            <th>序号</th>
                            <th>产品名称</th>
                            <th>产品图</th>
                            <th>产品单价</th>
                            <th>产品说明</th>
                            <th>操作选项</th>
                        </tr>
                    </thead>
                    <tbody id="cart">

                    </tbody>
                </table>
                <button onclick="jiesuan()" type="button" class="btn btn-danger" id="jiesuan">结算</button>
                <div id="zongjia">
                    <!-- <span style="padding-left: 500px; border-style: solid; border-width: 2px;"></span> -->
                </div>
            </div>
        </div>
    </div>
   
    <!-- 必须先引入jquery.min.js -->
    <script src="../plugins/jquery.min.js"></script>
    <!-- 引入bootstrap.js -->
    <script src="../plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    <script>
        let cart_data;//我自己定义的

        $(function () {
            let json_str = localStorage.getItem("carts");
            //json字符串 - json对象
            let json_obj = JSON.parse(json_str);
            //数组
            let arr = json_obj.admin;
            //定义一个字符串
            let str = "";
            for (let i = 0; i < arr.length; i++) {

                str += "<tr id='tr'>";
                str += "<td><input name='ck' type='checkbox'></td>";
                str += "<td>" + (i + 1) + "</td>";
                str += "<td>" + arr[i].name + "</td>";
                str += "<td><img src='../imgs/" + arr[i].url + "'></td>";
                str += "<td>" + arr[i].price + "</td>";
                str += "<td>" + arr[i].desc + "</td>";
                str += "<td><button type='button' class='btn btn-link' onclick='deleteRow(this," + i + ")'>删除</button></td>";
                str += "/<tr>";
            }

            $("#cart").html(str);
            cart_data = arr;
        })

        //删除购物车中的一行
        function deleteRow(obj, i) {
            let json_str = localStorage.getItem("carts");
            //将json字符串转成json对象
            let json_obj = JSON.parse(json_str);
            let json = json_obj.admin;
            let arr = json_obj.admin;
            arr = [];
            obj.parentNode.parentNode.remove();
            for (let j = 0; j < json.length; j++) {
                if (j != i) {
                    arr.push(json[j]);
                    console.log(json[j])
                }
            }
            localStorage.setItem('carts', '{"admin":' + JSON.stringify(arr) + '}');
        }

        function jiesuan(i) {
            let arr = document.getElementsByName("ck");
            let sum = 0;
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].checked == true) {
                    sum+=cart_data[i].pri;
                }
            }
            let str="<span id='s1' style='margin:10px;border-style: solid; border-width: 2px;border-color:#C0C0C0;background-color: #FF99FF;' >总价:"+sum+"</span>";
        $("#zongjia").html(str);
        }

        //全选和全不选
        function select_all(obj) {
            //获取下面所有的ck
            let arr = document.getElementsByName("ck");
            if (obj.checked) {
                for (let i = 0; i < arr.length; i++) {
                    arr[i].checked = true;
                }
            } else {
                for (let i = 0; i < arr.length; i++) {
                    arr[i].checked = false;
                }
            }
        }

    </script>
</body>

</html>